<template>
<div class="content-store">
  <section class="floor-main">
    <div class="shadow">
      <div class="tr edit-containe editor-btn">
        <w-button type="main" @on-click="showRecomment()">编辑</w-button>  
      </div>
    </div>
    <floor-header :type="floor.displayMode" :floor-name="floor.floorName || '商品推荐'" :floor-src="floor.floorPhotoPath"></floor-header>
    <div class="home-recommend" v-if="floor.goodsList && floor.goodsList.length == 3">
      <div class="img-wrap clearfix mb36">
        <div class="main fl">
          <router-link to="">
            <img v-lazy="floor.goodsList[0].goodsPath" alt="">
          </router-link>
          <h4><router-link to="">{{floor.goodsList[0].goodsName}}</router-link><strong>￥{{floor.goodsList[0].goodsPrice | currency}}</strong></h4>
        </div>
        <div class="sub fr">
          <div class="img-box">
            <router-link to="">
            <img v-lazy="floor.goodsList[1].goodsPath" alt="">
          </router-link>
          <h4><router-link to="">{{floor.goodsList[1].goodsName}}</router-link><strong>￥{{floor.goodsList[1].goodsPrice | currency}}</strong></h4>
          </div>
          <div class="img-box">
            <router-link to="">
              <img v-lazy="floor.goodsList[2].goodsPath" alt="">
            </router-link>
            <h4><router-link to="">{{floor.goodsList[2].goodsName}}</router-link><strong>￥{{floor.goodsList[2].goodsPrice | currency}}</strong></h4>
          </div>
        </div>
      </div>
    </div>
    <div class="home-recommend" v-if="!floor.goodsList || floor.goodsList.length !== 3">
      <div class="img-wrap clearfix mb36">
        <div class="main fl">
          <router-link to=""><img src="../../../assets/noimg.png" height="1024" width="1024" alt=""></router-link>
          <h4><router-link to="">请选择商品</router-link></h4>
        </div>
        <div class="sub fr">
          <div class="img-box">
            <router-link to=""><img src="../../../assets/noimg.png" alt=""></router-link>
            <h4><router-link to="">请选择商品</router-link></h4>
          </div>
          <div class="img-box">
            <router-link to=""><img src="../../../assets/noimg.png" alt=""></router-link>
            <h4><router-link to="">请选择商品</router-link></h4>
          </div>
        </div>
      </div>
    </div>
  </section>
  <w-panel-fixed-wrap class="cb pop" 
    v-model="show" 
    title="商家推荐" 
    width="1000px" 
    height="500px"
    @on-confirm="addNewRecomment" 
    @on-cancel="hidePopup">
    <form id="addNewRecomment" :action="url" method="POST" enctype="multipart/form-data">
      <div class="form-inline">
        <div class="form-group">
          <w-label :must="false">排序</w-label>
          <w-input :validate="false" name="sequence" v-model="params.sequence"></w-input>
          <span>根据设置的数字进行位置排序数字越小，位置越往上</span>
        </div>
        <div class="form-group">
          <w-label :must="false">是否展示</w-label>
          <w-radio :label="0" name="isOpen" v-model="params.isOpen">是</w-radio>
          <w-radio :label="1" name="isOpen" v-model="params.isOpen">否</w-radio>
          <span class="marl">设置否，则此楼层不在个人店铺首页展示</span>
        </div>
         <div class="form-group">
          <w-label :must="false">楼层名称</w-label>
          <w-radio :label="0" name="displayMode" v-model="params.displayMode">文字展示</w-radio>
          <w-radio :label="1" name="displayMode" v-model="params.displayMode">图片展示</w-radio>
        </div>
        <div class="form-group" v-show="params.displayMode == 0">
          <w-label :must="false">设置图层名称</w-label>
          <w-input rule="isCompany" error="至多6个包含中文，英文或其组合的字符" :maxlength="6" name="floorName" v-model="params.floorName"></w-input>
        </div>
        <div class="form-group" v-show="params.displayMode == 1">
          <w-label :must="false">图片上传</w-label>
          <!-- <w-button class="upload">上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png"></w-button> -->
          <div class="upload">
            上传<input type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png">
          </div>
          <img class="prev-image" :src="params.floorPhotoId" alt="">
        </div>
      </div>
      <!-- 关联搜索组件 -->
      <associated-search max="3" @on-input="getInputValue" @header="setNavigationType"></associated-search>
      <!-- 添加商品和已选商品选项框 -->
      <div class="add-exists-goods" v-show="!params.linkedProductType">
        <product-group max="3" :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList" @on-search="refresh = true"></product-group>
      </div>
      <!-- 隐藏字段 -->
      <div class="hidden">
        <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
        <input type="hidden" name="accessToken" :value="params.accessToken">
        <input type="hidden" name="floorType" value="Templet3">
        <input type="hidden" name="id" :value="params.id">
        <input type="hidden" name="decorationType" value="PC">
        <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
        <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
      </div>
    </form>
  </w-panel-fixed-wrap>
</div>
</template>

<script>
  // 关联商品搜索组件
  import associatedSearch from './associatedSearch'
  // 商品组件
  import productGroup from './productGroup'
  import floorHeader from './floorHeader'

  // 店铺PC装修的链接
  import { apiAdornPC } from '../../../common/api'
  import { API } from '../../../common/config'

  // 导入检验的js
  import { validateFloorParam, inSelectedGoodsList } from '../validate'
  import { getFileRealPath } from '../../../common/util'

  export default {
    props: {
      floor: {
        type: Object,
        default: () => { return {} }
      }
    },
    data() {
      return {
        refresh: false,
        show: false,
        wordType: 'goods',
        hide: true,
        goodsList: [],
        params: {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: 0,
          isOpen: 0,
          floorType: 'Templet',
          displayMode: 0,
          goodsIdList: '',
          floorName: '',
          floorPhotoId: '',
          linkedProductType: 0,
          linkedProductUrl: '',
          // 当前是否是编辑页面
          isEdit: false
        }
      }
    },
    mounted() {
      // 如果楼层的id存在
      if (this.floor.id) {
        this.params = this.floor
      }
    },
    computed: {
      url() {
        // 如果当前是修改状态
        if (this.params.isEdit) {
          return `${API}decoration/updateFloor`
        }
        // 当前是新增状态
        return `${API}decoration/addFloor`
      }
    },
    methods: {
      /**
       * 获取图片的真实路径
       */
      getImageRealPath(file) {
        this.params.floorPhotoId = getFileRealPath(file)
      },

      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.linkedProductType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.linkedProductType = 0
        }
      },
      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.linkedProductType = 1
          this.params.linkedProductUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.linkedProductType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornPC.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }
            if (this.refresh) {
              this.goodsList = data.list
            } else {
              // 遍历数据
              data.list.forEach((v) => {
                // 如果当前商品不在已选列表中
                if (!inSelectedGoodsList(v, this.params.goodsList)) {
                  this.goodsList.push(v)
                }
              })
            }
          })
        }
      },

      /**
       * 新增新的Banner
       */
      addNewRecomment() {
        // 商品没选，则提示
        if (!validateFloorParam(this.params)) {
          return
        }

        // 分割商品列表，如果商品不是3个，则弹框提示
        if (!this.params.goodsIdList || this.params.goodsIdList.split(',').length !== 3) {
          this.$toast('请选择3个商品')
          return
        }

        // 添加banner
        this.$emit('add', this.hidePopup)
      },

      hidePopup() {
        this.show = false
      },

      /**
       * 点击装修首页的商品推荐的编辑
       */
      showRecomment() {
        // 展示弹框
        this.show = true

        // 商品id集合
        let goodsIds = []

        // 如果商品列表存在
        if (this.floor.goodsList && this.floor.goodsList.length > 0) {
          this.floor.goodsList.forEach((v) => {
            goodsIds.push(v.goodsId)
          })
        }

        // 参数
        this.params = {
          id: this.floor.id,
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: (this.floor.sequence || 0),
          isOpen: (this.floor.isOpen || 0),
          floorType: 'Templet',
          displayMode: (this.floor.displayMode || 0),
          goodsIdList: (goodsIds.join(',') || ''),
          goodsList: (this.floor.goodsList || []),
          floorName: this.floor.floorName,
          floorPhotoId: this.floor.floorPhotoPath,
          linkedProductType: 0,
          linkedProductUrl: '',
          isEdit: false
        }

        // 如果楼层有值，则标记为编辑
        if (this.floor.id) {
          this.params.isEdit = true
        }
      },
      closeWin() {
        this.show = false
      },
      selectGoodsOrLink(type) {
        this.wordType = type
      }
    },
    components: {
      productGroup,
      floorHeader,
      associatedSearch
    }
  }
</script>
<style lang="scss" scoped>
  @import './style.scss';

  h4 {
    height: 60px;
    line-height: 60px;
  }

  .prev-image {
    display: inline-block;
    width: auto;
    height: 30px;
    margin-bottom: -10px;
  }

  .content-store {
    position: relative;
    .shadow {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 9;
      background-color: rgba(0,0,0,0.6);
      width: 1000px;
      padding-top: 20px;
      padding-right: 20px;
      display: none;
    }
  }
  .upload {
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 30px;
    line-height: 26px;
    background-color: #47bdf4;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;

    input[type=file] {
      cursor: pointer;
      position: absolute;
      opacity: 0;
      width: 1000px;
      height: 1000px;
      top: 0px;
      left: 0px;
    }
  }
  .floor-main:hover .shadow{
    display: block;
  }
  .pop {
     .form-group {
      display: block;
      .w-input {
        display: inline-block;
        margin-right: 24px;
        width: 230px;
      }
      .control-label {
        width: 86px;
        text-align: right;
        display: inline-block;
        margin-right: 40px;
      }
      .m-radio:nth-child(3) {
        margin-left: 30px;
      }
      .marl {
        margin-left: 133px;
        display: inline-block;
      }
    }
    .limit {
      font-size: 14px;
      color: #ff7e00;
      padding-left: 44px;
    }
    .ml28 {
      margin-left: 28px;
    }
    .nav-container {
      width: 1000px;
      margin: 0 auto;
      position: relative;
    }

    .edit-container {
      bottom: 0px;
      position: absolute;
    }

    .search {
      padding-bottom: 20px;
      margin-top: -10px;
      margin-left: -10px;
    }
    .title {
      background-color: #f2f2f2;
      font-size: 14px;
      height: 52px;
      line-height: 52px;
      margin-left: -30px;
      margin-right: -30px;
      padding-left: 20px;
    }
    .class-select {
      border-bottom: 1px solid #e0e0e0;
      padding: 56px 100px;
      margin: 0px -10px;

      .select {
        display: inline-block;
        width: 132px;
        margin-right: 26px;
      }

      .input {
        display: inline-block;
        width: 160px;
      }

      .input-long {
        width: 300px;
      }
    }

    .search-btn {
      margin: 30px 0px 46px 90px;
    }

    .add-exists-goods {
      margin: 0px -10px;
      
      .product-container {
        display: inline-block;
        width: 602px;

        &.mr26 {
          margin-right: 26px;
        }
      }
    }
}
</style>